<template>
  <view class="add-conference-room">
    <view class="conference-room-con">
      <view class="conference-room-item">
        <view class="conference-room-item-title">基本信息(必填)</view>
        <view class="room-item-box">
          <view class="room-name">
            <view class="room-name-title">
              <i class="iconfont icon-huiyizichan"></i>
              <text>会议室名称</text>
            </view>
            <view class="room-name-input">
              <nut-input
                v-model="form.name"
                placeholder="请输入"
              />
            </view>
          </view>
          <view class="room-name">
            <view class="room-name-title">
              <i class="iconfont icon-didian"></i>
              <text>会议室地点</text>
            </view>
            <view class="room-name-input">
              <nut-input
                v-model="form.location"
                placeholder="请输入"
              />
            </view>
          </view>
          <view class="room-name">
            <view class="room-name-title">
              <i class="iconfont icon-fengmian"></i>
              <text>封面</text>
            </view>
            <view class="room-name-upload">
              <uploads
                @files="getFiles"
                :path="form.coverImage"
                type="image"
              >
                <view class="upload-box">
                  <i class="iconfont icon-jiahao1"></i>
                </view>
              </uploads>
            </view>
          </view>
        </view>
      </view>
      <view class="logo-bottom">
        <img
          src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01ROtCca1S9wNLeJ6zx_!!1034622205.png"
          alt=""
        />
      </view>
      <view class="btn-box">
        <view class="btn-box-item">
          <nut-button
            class="btn"
            type="default"
            @click="cancel"
            >删除
          </nut-button>
          <nut-button
            class="btn btn-primary"
            type="primary"
            color="#1E74FD"
            @click="handleAddSystemRoom"
            >保存
          </nut-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import uploads from "@/components/uploads/index.vue";
import Taro from "@tarojs/taro";
import { addSystemRoom } from "@/api/index";
const form = reactive({
  name: "",
  location: "",
  coverImage: "",
});
const handleAddSystemRoom = async () => {
  form.coverImage = form.coverImage[0].url;
  addSystemRoom(form).then(res => {
    Taro.showToast({
      title: "添加成功",
      icon: "success",
      duration: 2000,
    });
    Taro.navigateBack({
      delta: 1,
    });
  });
};
const getFiles = (files: any) => {
  form.coverImage = files;
};
const cancel = () => {};
</script>

<style lang="less">
@import "./index.less";
@import url("../../../../assets/css/index.css");
</style>
